<template>
	<button class="zvl-btn" @click='click' :class="btnType" :disabled="disabled" :style="btnStyle">
		<span>
			<slot></slot>
		</span>
	</button>
</template>

<script>
	export default {
		name: 'btn',
		props: ['title', 'color', 'type', 'disabled', 'size', 'radius', 'disabledStyle', 'normalStyle'],
		data() {
			return {
				bgColor: '#3c87fa',
				btnStyle: ''
			}

		},
		computed: {
			btnColor: function() {
				return this.color ? this.color : '#fff'
			},
			btnType: function() {
				let s;
				if(this.disabled) {
					this.btnStyle = ''
					if(this.disabledStyle) {
						console.log(123)
						this.btnStyle = this.disabledStyle
					} else {
						s = {
							'zvl-btn-disabled': true
						}
					}
				} else {
					this.btnStyle = ''
					if(this.normalStyle) {
						this.btnStyle = this.normalStyle
					}
					switch(this.type) {
						case 'ghost':
							s = {
								'zvl-btn-ghost': true
							}
							break;
						case 'error':
							s = {
								'zvl-btn-error': true
							}
							break;
					}
				}
				switch(this.size) {
					case 'small':
						s = {
							...s,
							'zvl-btn-small': true
						}
						break;
					case 'large':
						s = {
							...s,
							'zvl-btn-large': true
						}
				}
				return s
			}
		},
		methods: {
			click() {
				if(this.disabled)
					return
				this.$emit('click')
			}
		}
	}
</script>

<style lang='scss' scoped>
	.zvl-btn {
		background: #308fff;
		position: relative;
		padding: 8px 20px;
		border: 0;
		border-radius: 99rem;
		display: inline-block;
		color: #fff;
		&::before {
			content: " ";
			position: absolute;
			top: 50%;
			left: 50%;
			opacity: 0;
			width: 100%;
			height: 100%;
			border: inherit;
			border-color: #000;
			background-color: #000;
			border-radius: 99rem;
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
		}
		&:active::before {
			opacity: .3;
		}
	}
	
	.zvl-btn-disabled {
		background-color: #e8e8e8;
		border: 1px solid #e8e8e8;
		color: #999;
	}
	
	.zvl-btn-ghost {
		background-color: transparent;
		border: 1px solid #999;
		color: #999;
	}
	
	.zvl-btn-error {
		background-color: #ed4014;
		border: 1px solid #ed4014;
	}
	
	.zvl-btn-small {
		padding: 4px .2rem;
	}
	
	.zvl-btn-large {
		width: 100%;
		height: 100%;
		line-height: 100%;
		border-radius: 0
	}
	
	.disabled {
		&::before {
			opacity: 0!important;
		}
	}
</style>